<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Galleria Classic Theme</title>
        <style>

            /* Demo styles */
            html,body{background:#222;margin:0;}
            body{border-top:4px solid #000;}
            .content{color:#777;font:12px/1.4 "helvetica neue",arial,sans-serif;width:620px;margin:20px auto;}
            h1{font-size:12px;font-weight:normal;color:#ddd;margin:0;}
            p{margin:0 0 20px}
            a {color:#22BCB9;text-decoration:none;}
            .cred{margin-top:20px;font-size:11px;}

            /* This rule is read by Galleria to define the gallery height: */
            #galleria{height:320px}

        </style>

        <!-- load jQuery -->
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>

        <!-- load Galleria -->
        <script src="../../galleria-1.2.9.min.js"></script>

    </head>
<body>
    <div class="content">
        <h1>Galleria Classic Theme</h1>
        <p>Demonstrating a basic gallery example.</p>

        <!-- Adding gallery images. We use resized thumbnails here for better performance, but it’s not necessary -->

        <div id="galleria">
            <a href="http://upload.wikimedia.org/wikipedia/commons/thumb/a/a2/Biandintz_eta_zaldiak_-_modified2.jpg/800px-Biandintz_eta_zaldiak_-_modified2.jpg">
                <img 
                    src="http://upload.wikimedia.org/wikipedia/commons/thumb/a/a2/Biandintz_eta_zaldiak_-_modified2.jpg/100px-Biandintz_eta_zaldiak_-_modified2.jpg",
                    data-big="http://upload.wikimedia.org/wikipedia/commons/thumb/a/a2/Biandintz_eta_zaldiak_-_modified2.jpg/1280px-Biandintz_eta_zaldiak_-_modified2.jpg"
                    data-title="Biandintz eta zaldiak"
                    data-description="Horses on Bianditz mountain, in Navarre, Spain."
                >
            </a>
            <a href="http://upload.wikimedia.org/wikipedia/commons/thumb/6/6c/Athabasca_Rail_at_Brule_Lake.jpg/800px-Athabasca_Rail_at_Brule_Lake.jpg">
                <img 
                    src="http://upload.wikimedia.org/wikipedia/commons/thumb/6/6c/Athabasca_Rail_at_Brule_Lake.jpg/100px-Athabasca_Rail_at_Brule_Lake.jpg",
                    data-big="http://upload.wikimedia.org/wikipedia/commons/thumb/6/6c/Athabasca_Rail_at_Brule_Lake.jpg/1280px-Athabasca_Rail_at_Brule_Lake.jpg"
                    data-title="Athabasca Rail"
                    data-description="The Athabasca River railroad track at the mouth of Brulé Lake in Alberta, Canada."
                >
            </a>
            <a href="http://upload.wikimedia.org/wikipedia/commons/thumb/1/1f/Back-scattering_crepuscular_rays_panorama_1.jpg/1280px-Back-scattering_crepuscular_rays_panorama_1.jpg">
                <img 
                    src="http://upload.wikimedia.org/wikipedia/commons/thumb/1/1f/Back-scattering_crepuscular_rays_panorama_1.jpg/100px-Back-scattering_crepuscular_rays_panorama_1.jpg",
                    data-big="http://upload.wikimedia.org/wikipedia/commons/thumb/1/1f/Back-scattering_crepuscular_rays_panorama_1.jpg/1400px-Back-scattering_crepuscular_rays_panorama_1.jpg"
                    data-title="Back-scattering crepuscular rays"
                    data-description="Picture of the day on Wikimedia Commons 26 September 2010."
                >
            </a>
            <a href="http://upload.wikimedia.org/wikipedia/commons/thumb/7/75/Interior_convento_3.jpg/800px-Interior_convento_3.jpg">
                <img 
                    src="http://upload.wikimedia.org/wikipedia/commons/thumb/7/75/Interior_convento_3.jpg/120px-Interior_convento_3.jpg",
                    data-big="http://upload.wikimedia.org/wikipedia/commons/thumb/7/75/Interior_convento_3.jpg/1400px-Interior_convento_3.jpg"
                    data-title="Interior convento"
                    data-description="Interior view of Yuriria Convent, founded in 1550."
                >
            </a>
            <a href="http://upload.wikimedia.org/wikipedia/commons/thumb/6/6b/Oxbow_Bend_outlook_in_the_Grand_Teton_National_Park.jpg/800px-Oxbow_Bend_outlook_in_the_Grand_Teton_National_Park.jpg">
                <img 
                    src="http://upload.wikimedia.org/wikipedia/commons/thumb/6/6b/Oxbow_Bend_outlook_in_the_Grand_Teton_National_Park.jpg/100px-Oxbow_Bend_outlook_in_the_Grand_Teton_National_Park.jpg",
                    data-big="http://upload.wikimedia.org/wikipedia/commons/thumb/6/6b/Oxbow_Bend_outlook_in_the_Grand_Teton_National_Park.jpg/1280px-Oxbow_Bend_outlook_in_the_Grand_Teton_National_Park.jpg"
                    data-title="Oxbow Bend outlook"
                    data-description="View over the Snake River to the Mount Moran with the Skillet Glacier."
                >
            </a>
            <a href="http://upload.wikimedia.org/wikipedia/commons/thumb/c/c9/Hazy_blue_hour_in_Grand_Canyon.JPG/800px-Hazy_blue_hour_in_Grand_Canyon.JPG">
                <img 
                    src="http://upload.wikimedia.org/wikipedia/commons/thumb/c/c9/Hazy_blue_hour_in_Grand_Canyon.JPG/100px-Hazy_blue_hour_in_Grand_Canyon.JPG",
                    data-big="http://upload.wikimedia.org/wikipedia/commons/thumb/c/c9/Hazy_blue_hour_in_Grand_Canyon.JPG/1280px-Hazy_blue_hour_in_Grand_Canyon.JPG"
                    data-title="Hazy blue hour"
                    data-description="Hazy blue hour in Grand Canyon. View from the South Rim."
                >
            </a>
            <a href="http://upload.wikimedia.org/wikipedia/commons/thumb/f/f4/2909_vallon_moy_res.jpg/800px-2909_vallon_moy_res.jpg">
                <img 
                    src="http://upload.wikimedia.org/wikipedia/commons/thumb/f/f4/2909_vallon_moy_res.jpg/100px-2909_vallon_moy_res.jpg",
                    data-big="http://upload.wikimedia.org/wikipedia/commons/thumb/f/f4/2909_vallon_moy_res.jpg/1280px-2909_vallon_moy_res.jpg"
                    data-title="Haute Severaisse valley"
                    data-description="View of Haute Severaisse valley and surrounding summits from the slopes of Les Vernets."
                >
            </a>
            <a href="http://upload.wikimedia.org/wikipedia/commons/thumb/4/46/Bohinjsko_jezero_2.jpg/800px-Bohinjsko_jezero_2.jpg">
                <img 
                    src="http://upload.wikimedia.org/wikipedia/commons/thumb/4/46/Bohinjsko_jezero_2.jpg/100px-Bohinjsko_jezero_2.jpg",
                    data-big="http://upload.wikimedia.org/wikipedia/commons/thumb/4/46/Bohinjsko_jezero_2.jpg/1280px-Bohinjsko_jezero_2.jpg"
                    data-title="Bohinj lake"
                    data-description="Bohinj lake (Triglav National Park, Slovenia) in the morning."
                >
            </a>
            <a href="http://upload.wikimedia.org/wikipedia/commons/thumb/3/32/Bowling_Balls_Beach_2_edit.jpg/800px-Bowling_Balls_Beach_2_edit.jpg">
                <img 
                    src="http://upload.wikimedia.org/wikipedia/commons/thumb/3/32/Bowling_Balls_Beach_2_edit.jpg/100px-Bowling_Balls_Beach_2_edit.jpg",
                    data-big="http://upload.wikimedia.org/wikipedia/commons/thumb/3/32/Bowling_Balls_Beach_2_edit.jpg/1280px-Bowling_Balls_Beach_2_edit.jpg"
                    data-title="Bowling Balls"
                    data-description="Mendocino county, California, USA."
                >
            </a>
        </div>

        <p class="cred">Made by <a href="http://galleria.aino.se">Galleria</a>.</p>
    </div>
<script src="galleria.twelvetes.min.js"></script>
<style>
#sviews-jqfx-galleria-images-1{-moz-box-shadow:0 1px 3px rgba(0,0,0,0.2);-webkit-box-shadow:0 1px 3px rgba(0,0,0,0.2);box-shadow:0 1px 3px rgba(0,0,0,0.2);background:none repeat scroll 0 0 #fff;height:400px;margin:0 auto;padding:12px;width:666px;}.galleria-container{color:#fff;font:11px/1.4 arial,sans-serif;overflow:hidden;position:relative;}.galleria-container img{-moz-user-select:none;}.galleria-stage{background:none repeat scroll 0 0 #000;bottom:30px;left:0;overflow:hidden;position:absolute;right:0;top:0;}.galleria-container.fullscreen .galleria-stage{bottom:0;}.galleria-bar{background:url("bar.png") repeat-x scroll 0 0 transparent;bottom:0;height:31px;left:0;position:absolute;width:100%;z-index:3;}.galleria-s1,.galleria-s2,.galleria-s3,.galleria-s4{background:url("separator.png") repeat scroll 0 0 transparent;bottom:1px;height:29px;left:28px;position:absolute;width:2px;}.galleria-s2{left:58px;}.galleria-s3{left:auto;right:29px;}.galleria-s4{left:auto;right:58px;}.galleria-progress{background:none repeat scroll 0 0 #aaa;height:2px;left:0;opacity:.5;position:absolute;top:0;width:0;z-index:3;}.galleria-thumblink,.galleria-fullscreen,.galleria-play,.galleria-popout{background:url("thumbs.png") no-repeat scroll 50% 50% transparent;bottom:1px;cursor:pointer;height:29px;left:0;position:absolute;width:29px;}.galleria-fullscreen,.galleria-popout{background-image:url("fullscreen.png");background-position:8px 7px;left:auto;right:0;}.galleria-popout{background-image:url("popout.png");background-position:50% 50%;right:30px;}.galleria-play{background-image:url("playpause.png");background-position:10px 9px;left:30px;}.galleria-play.playing{background-position:10px -91px;}.galleria-fullscreen.open{background-position:8px -93px;}.galleria-thumblink:hover,.galleria-thumblink.open,.galleria-fullscreen:hover,.galleria-play:hover,.galleria-popout:hover{background-color:#000;}.galleria-thumbnails-container{background:url("bg.png") repeat scroll 0 0 transparent;height:0;left:0;position:absolute;top:0;width:0;z-index:2;}.galleria-thumbnails-list{bottom:41px;left:10px;overflow:auto;position:absolute;right:10px;top:10px;}.galleria-thumbnails .galleria-image{border:3px solid #fff;cursor:pointer;float:left;height:45px;margin:0 7px 7px 0;width:80px;}.galleria-thumbnails .galleria-image:hover{-moz-box-shadow:0 0 3px rgba(0,0,0,0.4);-webkit-box-shadow:0 0 3px rgba(0,0,0,0.4);box-shadow:0 0 3px rgba(0,0,0,0.4);opacity:.9;}.galleria-info{bottom:1px;color:#bbb;height:29px;left:70px;line-height:29px;overflow:hidden;position:absolute;right:70px;}.galleria-info>*,.galleria-info-text>*{display:inline;}.galleria-info-title{color:#fff;font-weight:700;padding:0 10px;}.galleria-info-text{padding-left:10px;}.galleria-counter{background:url("separator.png") no-repeat scroll 100% 0 transparent;display:inline-block;padding-right:10px;}.galleria-loader{-moz-border-radius:6px 6px 6px 6px;-webkit-border-radius:6px 6px 6px 6px;border-radius:6px 6px 6px 6px;background:url("loader.gif") no-repeat scroll 50% 50% #000;display:none;height:48px;left:50%;margin:-24px 0 0 -24px;opacity:.8;position:absolute;top:50%;width:48px;z-index:2;}.galleria-image-nav{height:36px;left:0;margin-top:-18px;position:absolute;top:50%;width:100%;}.galleria-image-nav-left,.galleria-image-nav-right{background:url("nav.png") repeat scroll 0 0 transparent;cursor:pointer;height:36px;left:20px;position:absolute;width:36px;z-index:2;}.galleria-image-nav-right{background-position:-36px 0;left:auto;right:20px;z-index:2;}.galleria-image-nav-left:hover{background-position:0 -36px;}.galleria-image-nav-right:hover{background-position:-36px -36px;}.galleria-thumb-nav-left,.galleria-thumb-nav-right{background-position:-495px 5px;cursor:pointer;display:none;height:40px;left:0;opacity:.8;position:absolute;top:0;width:23px;z-index:3;}.galleria-thumb-nav-right{background-position:-578px 5px;border-right:medium none;left:auto;right:0;}.galleria-thumbnails-container .disabled,.galleria-thumbnails-container .disabled:hover{cursor:default;opacity:.2;}.galleria-thumb-nav-left:hover,.galleria-thumb-nav-right:hover{background-color:#111;opacity:1;}.galleria-carousel .galleria-thumb-nav-left,.galleria-carousel .galleria-thumb-nav-right{display:block;}.galleria-lightbox-content{background:url("loader_pos.gif") no-repeat scroll 50% 50% transparent;}
</style>
    <script>

    // Load the classic theme
 //   Galleria.loadTheme('galleria.twelve.js');

    // Initialize Galleria
    Galleria.run('#galleria');

    </script>
    </body>
</html>